<template>
	<view>
		<!-- 发布页面 -->

		<uni-nav-bar left-icon="back" statusBar :border="false" @clickLeft="clickLeft">
			<view class="flex align-center justify-center w-100" >
				所有人可见<text class="iconfont iconshezhi01"></text>
			</view>
		</uni-nav-bar>
		<!-- 文本域 -->
		<textarea v-model="content"  placeholder="施展才华" class=" p-2 uni-textarea " />
		<!-- 底部导航条 -->
		<view class="fixed-bottom bg-white flex align-center" style="height: 85rpx;">
		<view class="iconfont iconcaidan footer-btn animate__animated" hover-class="animate__bounce" ></view>
	    <view class="iconfont iconhuati footer-btn  animate__animated" hover-class="animate__bounce"></view>	
		<view class="iconfont iconimage footer-btn  animate__animated" hover-class="animate__bounce" @click="iconClickEvent('uploadImage')"></view>
		<view class="bg-main text-white ml-auto flex justify-center align-center rounded mr-2 animate__animated" style="width: 140rpx;height: 60rpx;"hover-class="animate__bounce" >发送</view>
		</view>
		<!-- 图片上传 -->
		<upload-image ref="uploadImage" @change="choose" :show="show" :imageList="imageList"></upload-image>
		</view>
	
		 
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	// import uniIcons from '@/components/uni-ui/uni-icons/uni-icons.vue'
	import uploadImage from '@/components/common/upload-image.vue'
	export default {
		components: {
			uniNavBar,
			uploadImage
		},
		data() {
			return {
			content:"",
			//把传输过来的图片保存在数组以便于发送到服务端
			imageList:[],
			// 控制着草稿显示一次
			showBack:false
			}
		},
		computed:{
			show(){
				return this.imageList.length>0
			}
		},
		// 页面的生命周期，监听返回事件  返回之后把之前输入的内容进行保存在草稿
		onBackPress(){
			
			if((this.content!=="" || this.imageList.length>0) && !this.showBack){
				uni.showModal({
					content:"是否要保存为草稿",
					showCancel:true,//是否显示取消按钮
					cancelText:"不保存",
					confirmText:"保存",
					success: (res) => {
						if(res.confirm){//用户点击了 确认
							// 保存草稿
							console.log('保存')
							this.store();//调用保存草稿数据的方法
						
						}else{
							uni.removeStorage({
								key:"add-input"
							})
						}
						uni.navigateBack({
							delta:1//返回的页数 大于现有的页数默认返回到首页 
						})
					}
				});
				this.showBack=true
				return true;
			}
		},
		
		methods: {
			// 点击底部图片按钮 想法调用chooseImageh事件(打开相册或相机)
			iconClickEvent(e){
				console.log(e)
				switch (e){
					case "uploadImage":
					this.$refs.uploadImage.chooseImage()
						break;
					 
				}
			},
			clickLeft(){
				uni.navigateBack({
					delta:1
				})
			},
			// 保存本地数据
			store(){
				let  obj={
					content:this.content,
					imageList:this.imageList
				}
				uni.setStorage({
					key:"add-input",
					data:JSON.stringify(obj)
				})
			},
			choose(e){console.log(e)
			this.imageList=e;
			}
		},
		onLoad() {
			uni.getStorage({
			    key: 'add-input',
			    success:res=> {
			        console.log(res);
					if(res.data){
						let  result=JSON.parse(res.data);
						console.log(result)
						this.content=result.content;
						this.imageList=result.imageList;
						
					}
			    }
			});
		},
	}
</script>

<style>
.footer-btn{
	width: 86rpx;height: 86rpx;display: flex;justify-content: center;align-items: center;font-size: 60rpx;
}
</style>
